<template>
  <div class="hiPlay">
    <v-header title="游记攻略" :fixed="true" ref="headerHeight"></v-header>
    <scroll
      ref="scroll"
      :style="{paddingTop: paddingTop + 'px'}">
      <div class="hiPlayModular" v-for="(item, index) in dataList" :key="index">
        <div class="hiPlayModularTop">
          <img class="hiPlayModularTopImg" :src="myTop" alt="">
          <div class="hiPlayModularTopRight">
            <span class="hiPlayModularTopRightPlus">＋ 加好友</span>
            <span>{{item.address}}</span>
          </div>
        </div>
        <div class="hiPlayModularDisc">
          <div class="nickName">{{item.nickName}}</div>
          <span class="desc">{{item.desc}}</span>
        </div>
        <div class="hiPlayModularImg">
          <grid :show-lr-borders="false" :show-vertical-dividers="false">
            <grid-item v-for="(item, index) in item.img" :key="index">
              <!-- <img slot="icon" v-lazy="item.src"  width="90" @click="show(index, item.src)"> -->
              <img slot="icon" v-lazy="item.src" width="90">
            </grid-item>
          </grid>
        </div>
      </div>
      <div :style="{height: height + 'px'}"></div>
    </scroll>
    <!-- <div v-transfer-dom>
      <previewer :list="dataList" :options="options" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
    </div> -->

    <div v-transfer-dom>
      <previewer :list="dataList" :options="options" ref="previewer"></previewer>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import { isIphoneX } from '@/assets/js/brower'
import myTop from '@/assets/img/myhome/my_top.png'
import { Grid, GridItem, TransferDom } from 'vux'
import Previewer from '@/components/previewer/previewer'

export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      paddingTop: 0,
      height: 0,
      myTop,
      options: {
        loop: false
      },
      dataList: [
        {
          img: [
            {
              src: 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'
            },
            {
              src: 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'
            }
          ],
          nickName: '老北京弄堂里',
          address: '3天后将去榕江旅行',
          desc: '这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~'
        },
        {
          img: [
            {
              src: 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'
            },
            {
              src: 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'
            },
            {
              src: 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'
            }
          ],
          nickName: '老北京弄堂里',
          address: '3天后将去榕江旅行',
          desc: '这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~'
        },
        {
          img: [
            {
              src: 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'
            },
            {
              src: 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'
            }
          ],
          nickName: '老北京弄堂里',
          address: '3天后将去榕江旅行',
          desc: '这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~这里是简介~'
        }
      ]
    }
  },
  components: {
    VHeader,
    Scroll,
    Grid,
    GridItem,
    Previewer
  },
  created () {
    if (isIphoneX()) {
      this.paddingTop = 74
      this.height = 120
    } else {
      this.paddingTop = 60
      this.height = 100
    }
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - this.paddingTop) + 'px'
  },
  method: {
    show (index, src) {
      // 预览图片
      if (src === null || src === '') {
        this.$vux.toast.text('图片被猪拱了~', 'middle')
        return
      }
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable'
  .hiPlay {
    position fixed 
    top 0
    right 0
    bottom 0
    left 0
    // background $color-background
    z-index 500
    background #ffffff
    padding 0 15px
    .hiPlayModular {
      box-shadow 0 1px 6px rgba(0,0,0,0.2) 
      border 1px solid rgba(0,0,0,0.2)
      padding 15px 10px
      margin-top 20px
      border-radius 12px
      .hiPlayModularTop{
        display flex
        justify-content space-between
        align-items center
        .hiPlayModularTopImg {
          width 60px
          height 60px
          border-radius 30px
        }
        .hiPlayModularTopRight{
          display flex
          flex-direction column
          align-items flex-end
          .hiPlayModularTopRightPlus{
            border 1px solid lightgrey 
            padding 2px 8px
            border-radius 2px  
            margin-bottom 10px
          }
        }
      }
      .hiPlayModularDisc{
        .nickName{
          font-size $font-size-title 
          overflow hidden 
          text-overflow ellipsis 
          white-space nowrap 
          width 90% 
          margin 10px 0
        }
        .desc{
          font-size $font-size-desc
          color $color-text-2
        }
      }
      .hiPlayModularImg{
      }
    }
  }
</style>

<style lang='stylus' rel='stylesheet/stylus'>
  .hiPlayModularImg .weui-grids:before{
    border none
  }
  .hiPlayModularImg .weui-grid:after{
    border none  
  }
  .hiPlayModularImg .weui-grid__icon{
    height 100px
    width 100%  
  }
  .hiPlayModularImg .weui-grid{
    padding 20px 3px 10px
  }
</style>
